var globalDefaultIdCount = 0;

var globalCompPopFrameData = new Map();

class FrameItem {
	constructor(holder, callbackMethod, frameId) {

		if (frameId)
			this.frameId = frameId;
		else {
			this.frameId = "popFrame" + globalDefaultIdCount;
			globalDefaultIdCount += 1;
		}
		this.callbackMethod = callbackMethod ? callbackMethod : this.closeFrame;

		this.mainTitleId = this.frameId + "_frameTitle";
		this.subTitleId = this.frameId + "_frameSubTitle";
		this.infoId = this.frameId + "_infoout";
		this.inputId = this.frameId + "frameInput";

		if (holder) {
			var html = this.makeHtml();
			$("#" + holder).append(html);
		}
		globalCompPopFrameData.set(this.frameId, this);
		this.hide();
	}

	makeHtml() {
		var frameHtml = "<div id='" + this.frameId + "' style='display: none'>" +
			"<div class='frameBase' style='width: 100%' onclick='closeFrame(\"" + this.frameId + "\")'></div>" +
			"<div class='box' style='height: 400px'>" +
			"<h3 id='" + this.mainTitleId + "' style='text-align: center'></h3>" +
			"<div><span id='" + this.infoId + "' style='color: red; text-align: center'></span></div>" +
			"<span id='" + this.subTitleId + "' style='width: 80%; left: 10%; top: 220px; position: absolute; text-align: center'>content</span><br>" +
			"<input id='" + this.inputId + "' type='text' style='width: 60%; left: 20%; top: 260px; position: absolute; '" +
			"onkeydown='if(event.keyCode==13){compOnFrameOk(\"" + this.frameId + "\");}'>" +
			"<button class='btn btn1' onclick='compOnFrameOk(\"" + this.frameId + "\")'" +
			"style='width: 20%; left: 20%; top: 330px; position: absolute; text-align: center'>确定</button>" +
			"<button class='btn btn1' onclick='closeFrame(\"" + this.frameId + "\")'" +
			"style='width: 20%; left: 60%; top: 330px; position: absolute; text-align: center'>取消</button>" +
			"</div>" +
			"</div>";

		return frameHtml;
	}

	setCallBack(callbackMethod) {
		this.callbackMethod = callbackMethod;
	}

	showInfo(txt) {
		$("#" + this.infoId).html(txt);
	}

	showTitle(txt) {
		$("#" + this.mainTitleId).html(txt);
	}

	showSubTitle(txt) {
		$("#" + this.subTitleId).html(txt);
	}

	show(showInput, title, subTitle, inputValue) {

		$("#" + this.frameId).css("display", "block");
		this.showTitle(title);
		this.showSubTitle(subTitle);
		this.showInfo("");

		if (inputValue)
			$("#" + this.inputId).val(inputValue);
		else
			$("#" + this.inputId).val("");

		if (showInput)
			$("#" + this.inputId).css("display", "block");
		else
			$("#" + this.inputId).css("display", "none");
	}

	hide() {
		$("#" + this.frameId).css("display", "none");
		$("#" + this.mainTitleId).html("");
		$("#" + this.subTitleId).html("");
		$("#" + this.infoId).val("");
		$("#" + this.inputId).val("");
	}

	getInput() {
		return $("#" + this.inputId).val();
	}
}

function compOnFrameOk(frameId) {
	var data = globalCompPopFrameData.get(frameId);
	if (!data)
		return;
	data.callbackMethod(data);
}

function closeFrame(frameId) {
	var data = globalCompPopFrameData.get(frameId);
	if (!data)
		return;
	data.hide();
}